
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="attendance/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="attendance/css/commonly-used-show.css" />
    <link rel="stylesheet" type="text/css" href="attendance/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="attendance/js/jquery.min.js"></script>
    <script type="text/javascript" src="attendance/js/bootstrap.js" ></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="attendance/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="attendance/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    <title>修改考勤设置</title>

</head>

<body class="mybody">

 <jsp:include page="theTopMenuTeacher.jsp" />



 <div class="container-fluid">
    <div class="row">

        <div class="col-md-12">
            <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="alert alert-success">

                                <div>
        <h3 style="text-align: center">修改考勤规则信息</h3>
        <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#6f5999" size="3"/>

        <div id="personal_user" style="margin-left: 80px">
            <div class="form-group same-line">
                <label ><b style="color: red">*&nbsp</b>年级：</label>
               <select style="font-size:14px" id="grade_selectlink" class="form-control edit" title="请选择" data-live-search="true">
                    <option value="" disabled selected hidden>请选择</option>
                   <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                     <option value="2020">2020</option>
                     <option value="2021">2021</option>
                </select>
            </div>

            <div class="form-group same-line-left">
                <label ><b style="color: red">*&nbsp</b>学院：</label>
                <select style="font-size:14px" id="college_selectlink" class="form-control edit" title="请选择" data-live-search="true">
                    <option value="" disabled selected hidden>请选择</option>
                    <option value="继续教育学院">继续教育学院</option>
                    <option value="国际学院">国际学院</option>
                    <option value="大健康学院">大健康学院</option>
                     <option value="材料与化学工程学院">材料与化学工程学院</option>
                     <option value="大数据学院">大数据学院</option>
                    <option value="农林工程与规划学院">农林工程与规划学院</option>
                    <option value="经济管理学院">经济管理学院</option>
                    <option value="艺术学院">艺术学院</option>
                    <option value="人文学院">人文学院</option>
                    <option value="教育学院">教育学院</option>
                    <option value="马克思主义学院">马克思主义学院</option>
                    <option value="乌江学院">乌江学院</option>
                     <option value="国学院">国学院</option>
                </select>
            </div>

            <div class="form-group same-line-left">
                <label ><b style="color: red">*&nbsp</b>班级：</label>
                <select style="font-size:14px" id="class_selectlink" class="form-control edit" title="请选择" data-live-search="true">
                    <option value="" disabled selected hidden>请选择</option>
                </select>
            </div>

            <div class="form-group same-line">
                <label ><b style="color: red">*&nbsp</b>选择课程科目：</label>
                <select style="font-size:14px" id="course_selectlink" class="form-control edit" title="请选择" data-live-search="true">
                    <option value="" disabled selected hidden>请选择</option>
                </select>
            </div>

            <div class="form-group same-line-left">
                <label ><b style="color: red">*&nbsp</b>打卡开始时间：</label>
                <div class="controls input-append date form_datetime" data-date-format="dd MM yyyy - HH:ii p" data-link-field="start_time">
                    <input class="form-control edit" size="16" type="text" readonly placeholder="请选择" />
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
                <input class="form-control edit" type="hidden" id="start_time"/>
            </div>


            <div class="form-group same-line-left">
                <label ><b style="color: red">*&nbsp</b>打卡结束时间：</label>
                <div class="controls input-append date form_datetime" data-date-format="dd MM yyyy - HH:ii p" data-link-field="end_time">
                    <input class="form-control edit" size="16" type="text" readonly placeholder="请选择" />
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
                <input class="form-control edit" type="hidden" id="end_time"/>
            </div>

            <div class="form-group same-line">
                <label ><b style="color: red">*&nbsp</b>打卡星期：</label>

                <div class="input-group">
                    <div class="input-group-addon">
                        <span>选择星期</span>
                    </div>
                    <input type="hidden" id="ids" />
                    <input class="form-control" type="text" id="week" onclick="show(this)" placeholder="选择星期" readonly style="width:350px" />
                    <div class="popover fade bottom in" id="panel" style="display:block;opacity:0">
                    <div class="arrow"></div>
                    <div class="popover-title" style="height:35px;">
                        <div class="checkbox" style="margin-top:0;margin-bottom:0px;"></div>
                        <label><input type="checkbox" onchange="CheckAll(this)" />全选</label>
                        <button type="button" class="close" onclick="hide()">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                    </div>

                    <div class="popover-content">
                       <ul class="list-inline" id="wekdate" >

                       </ul>
                    </div>
                </div>
                </div>
            </div>

            <div class="form-group same-line-left">

            </div>

        </div>


        <div class="text-center same-line-clear">
            <div class="form-group">
                <input type="button" value="确认修改" class="btn btn-primary" onclick="present()" >
                <input type="reset" value="重置" class="btn btn-danger interval" onclick="reset()">
            </div>

            <div>
                <label id="user_null" style="color: red"></label>
            </div>
        </div>

    </div>

                            </div>
                        </div>
                    </div>
                </div>
        </div>



    </div>

 </div>




<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    var userNull = document.getElementById("user_null");
    if (userdt.result.userName != null){
        $("#usname").text(userdt.result.userName);
    }else {
        $("#usname").text(userdt.result.userLoginName);
    }

    function reset(){
        var addUser = document.getElementById("personal_user");
        var ipts = addUser.getElementsByTagName("input");
        for (var i = 0; i < ipts.length; i++){
            ipts[i].value = "";
        }
    }

    window.onload = function(){
        attendanceInfo();
        clockRulesInfo();
        mywek();
    }

    function attendanceInfo(){
        var postUrl = "${pageContext.request.contextPath}/member/queryCourseInfoAll";

        var str = {
            "teacherId": userdt.result.id
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    for (var i = 0; i < data.result.length; i++) {
                        //$("#grade_selectlink").append("<option value=" + "'" + data.result[i].grade + "'>" + data.result[i].grade + "</option>" );
                       // $("#college_selectlink").append("<option value=" + "'" + data.result[i].college + "'>" + data.result[i].college + "</option>" );
                        $("#class_selectlink").append("<option value=" + "'" + data.result[i].classAndGrade + "'>" + data.result[i].classAndGrade + "</option>" );
                        $("#course_selectlink").append("<option value=" + "'" + data.result[i].courseTitle + "'>" + data.result[i].courseTitle + "</option>" );
                    }
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    function clockRulesInfo(){
        var postUrl = "${pageContext.request.contextPath}/member/clockRulesSelect";

        var str = {
            "id": "${param.id}"
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    $("#grade_selectlink").val(data.result.grade);
                    $("#college_selectlink").val(data.result.college);
                    $("#class_selectlink").val(data.result.classAndGrade);
                    $("#course_selectlink").val(data.result.courseTitle);
                    $("#week").val(data.result.attendDate);
                    $("#start_time").text(data.result.startAttendTime);
                    $("#end_time").val(data.result.endAttendTime);
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }


    function present(){
        var mGrade = $("#grade_selectlink").val();
        var mCollege = $("#college_selectlink").val();
        var mClass = $("#class_selectlink").val();
        var mCourse = $("#course_selectlink").val();
        var week = $("#week").val();
        var sTime = $("#start_time").val();
        var eTime = $("#end_time").val();

        var startTime = sTime.split(" ")[1];
        var endTime = eTime.split(" ")[1];

        if ($.isEmptyObject(mGrade)){
            userNull.innerHTML = "年级不能为空";
            return false;
        }else if ($.isEmptyObject(mCollege)){
            userNull.innerHTML = "学院不能为空";
            return false;
        }else if ($.isEmptyObject(mClass)){
            userNull.innerHTML = "班级不能为空";
            return false;
        }else if ($.isEmptyObject(mCourse)){
            userNull.innerHTML = "课程不能为空";
            return false;
        }else if ($.isEmptyObject(week)){
            userNull.innerHTML = "星期不能为空";
            return false;
        }else if ($.isEmptyObject(startTime)){
            userNull.innerHTML = "打卡开始时间不能为空";
            return false;
        }else if ($.isEmptyObject(endTime)){
            userNull.innerHTML = "打卡结束时间不能为空";
            return false;
        }

        var postUrl = "${pageContext.request.contextPath}/member/updateClockRules";
        var str = {
            "id": "${param.id}",
            "attendDate": week,
            "startAttendTime": startTime,
            "endAttendTime": endTime,
            "grade": mGrade,
            "college": mCollege,
            "classAndGrade": mClass,
            "courseTitle": mCourse
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    location.href = "${pageContext.request.contextPath}/attendanceManagement";
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    //加载时间控件
    $('.form_datetime').datetimepicker({
        //默认语言
        language: 'zh-CN',
        //默认选择格式
        format: "hh:ii:ss",
        autoclose: true,
        todayBtn: true,
        startView: 1,
    });

    function mywek(){
        //加载星期多选框
        var dataes = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"];
        var objArr = [];
        for (var m = 0; m < dataes.length; m++) {
            var obj = new Object();
            obj.id = m;
            obj.value=dataes[m];
            objArr.push(obj);
        }

        //加载多选框的数据
        for (var i = 0; i < objArr.length; i++) {
            $("#wekdate").append("<li><div class='checkbox'></div><label><input type='checkbox' value='" + objArr[i].id + "' onclick='Choose(this)'/>" + objArr[i].value + "</label></li>");
        }
    }


    //显示多选框
    function show(t) {
        //设置多选框显示的位置，在选择框的中间
        var left = t.offsetLeft + t.clientWidth / 2 - $("#panel")[0].clientWidth / 2
        var top = t.offsetTop + t.clientHeight + document.body.scrollTop;
        $("#panel").css("opacity", "1");
        $("#panel").css("margin-left", left);
        $("#panel").css("margin-top", top + 5);
    }
    //隐藏多选框
    function hide() {
        $("#panel").css("opacity", "0");
    }
    //全选操作
    function CheckAll(t) {
        var name = "";
        var ids = "";
        var popoverContent = $($(t).parent().parent().parent().children()[2]);
        popoverContent.find("input[type=checkbox]").each(function(i,th) {
            th.checked = t.checked;
            if (t.checked) {
                name += $(th).parent().text() + ",";
                ids += $(th).val() + ",";
            }
        });
        name = name.substr(0, name.length - 1);
        ids = ids.substr(0, ids.length - 1);
        $("#week").val(name);
        $("#ids").val(ids);
    }

    //勾选某一个操作
    function Choose(t) {
        var oldName = $("#week").val();
        var name = oldName == "" ? "," + $("#week").val() : "," + $("#week").val() + ",";
        var ids = oldName == "" ? "," + $("#ids").val() : "," + $("#ids").val() + ",";
        var newName = $(t).parent().text();
        var newid = $(t).val();

        if (t.checked) {//选中的操作
            $("#week").val(name += newName + ",");
            $("#ids").val(ids += newid + ",");
        } else {//去掉选中的操作
            var index = name.indexOf(","+newName+",");
            var len = newName.length;
            name = name.substring(0, index) + name.substring(index + len + 1, name.length);

            var index = ids.indexOf("," + newid + ",");
            var len = newid.length;
            ids = ids.substring(0, index) + ids.substring(index + len + 1, ids.length);
        }
        name = name.substr(1, name.length - 2);
        ids = ids.substr(1, ids.length - 2);
        $("#week").val(name);
        $("#ids").val(ids);
    }

</script>

</body>
</html>
</span>